<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>结算页</title>

	<link rel="stylesheet" type="text/css" href="/css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-getOrderInfo.css" />

</head>

<body>
	<!--head-->
	<div class="top">
		<div class="py-container">
			<div class="shortcut">
				<ul class="fl">
					<li class="f-item"><a href="/user/toIndex">东东商城欢迎您！</a></li>
					<li class="f-item">请登录　<span><a href="#">免费注册</a></span></li>
				</ul>
				<ul class="fr">
					<li class="f-item"><a href="/order/toOrderShow">我的订单</a></li>
					<li class="f-item space"></li>
					<li class="f-item">我的东东商城</li>
					<li class="f-item space"></li>
					<li class="f-item">东东商城会员</li>
					<li class="f-item space"></li>
					<li class="f-item">企业采购</li>
					<li class="f-item space"></li>
					<li class="f-item">关注东东商城</li>
					<li class="f-item space"></li>
					<li class="f-item">客户服务</li>
					<li class="f-item space"></li>
					<li class="f-item">网站导航</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="cart py-container">
		<!--logoArea-->
		<div class="logoArea">
			<div class="fl logo"><span class="title">结算页</span></div>
			<a></a>
			<div class="fr search">
				<form class="sui-form form-inline">
					<div class="input-append">
						<input type="text" class="input-error input-xxlarge" placeholder="东东商城自营" />
						<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
					</div>
				</form>
			</div>
		</div>
		<!--主内容-->
		<div class="checkout py-container">
			<div class="checkout-tit">
				<h4 class="tit-txt">填写并核对订单信息</h4>
			</div>
			<div class="checkout-steps">
				<!--收件人信息-->
				<div class="step-tit">
					<h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd">新增收货地址</a></span></h5>
				</div>
				<div class="step-cont">
					<div class="addressInfo">
						<ul class="addr-detail">
							<li id="contactInfo" class="addr-item">
							</li>
						</ul>
						<div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit" style="width:580px;">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
										<h4 id="myModalLabel" class="modal-title">新增地址</h4>
									</div>
									<div class="modal-body">
										<form id="insertAddressFrom" class="sui-form form-horizontal">
											<div class="control-group">
												<label class="control-label">收货人：</label>
												<div class="controls">
													<input type="text" name="contact" class="input-medium">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">所在地区：</label>
												<div class="controls">
													<div data-toggle="distpicker">
														<div class="form-group area">
															<select class="form-control" id="province" name="provinceId" onchange="updateThisCity(this)">
																<option value="0">请选择</option>
																<option th:each="province : ${provincesList}" th:value="${province.provinceid}">[[${province.province}]]</option>
															</select>
															<select class="form-control" id="city" name="cityId" onchange="updateArea(this)">
																<option value="0">请选择省</option>
															</select>
															<select class="form-control" id="district" name="townId">
																<option value="0">请选择市</option>
															</select>
														</div>
													</div>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">详细地址：</label>
												<div class="controls">
													<input type="text" name="address" class="input-large">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">联系电话：</label>
												<div class="controls">
													<input type="text" name="mobile" class="input-medium">
												</div>
											</div>
											<div class="control-group">
												<label class="control-label">地址别名：</label>
												<div class="controls">
													<input type="text" id="insertAlias" name="alias" class="input-medium">
												</div>
												<div class="othername">
													建议填写常用地址：<a onclick="setThisAlias(this)" class="sui-btn btn-default">家里</a>　<a onclick="setThisAlias(this)" class="sui-btn btn-default">父母家</a>　<a onclick="setThisAlias(this)" class="sui-btn btn-default">公司</a>
												</div>
											</div>

										</form>


									</div>
									<div class="modal-footer">
										<button type="button" onclick="insertAddress()" data-ok="modal" class="sui-btn btn-primary btn-large">确定</button>
										<button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
									</div>
								</div>
							</div>
						</div>
						 <!--确认地址-->
					</div>
					<div class="hr"></div>
					
				</div>
				<div class="hr"></div>
				<!--支付和送货-->
				<div class="payshipInfo">
					<div class="step-tit">
						<h5>支付方式</h5>
					</div>
					<div class="step-cont">
						<ul class="payType" id="payWay">
							<li class="selected">支付宝付款<span title="点击取消选择"></span></li>
							<li>货到付款<span title="点击取消选择"></span></li>
						</ul>
					</div>
					<div class="hr"></div>
					<div class="step-tit">
						<h5>送货清单</h5>
					</div>
					<div class="step-cont">
						<ul id="cartUl" class="send-detail"></ul>
					</div>
					<div class="hr"></div>
				</div>
				<div class="linkInfo">
					<div class="step-tit">
						<h5>发票信息</h5>
					</div>
					<div class="step-cont">
						<span>普通发票（电子）</span>
						<span>个人</span>
						<span>明细</span>
					</div>
				</div>
				<div class="cardInfo">
					<div class="step-tit">
						<h5>使用优惠/抵用</h5>
					</div>
				</div>
			</div>
		</div>
		<div class="order-summary">
			<div class="static fr">
				<div class="list">
					<span><i id="numIId" class="number">1</i>件商品，总商品金额</span>
					<em id="priceEmId" class="allprice">¥5399.00</em>
				</div>
				<div class="list">
					<span>返现：</span>
					<em class="money">0.00</em>
				</div>
				<div class="list">
					<span>运费：</span>
					<em class="transport">0.00</em>
				</div>
			</div>
		</div>
		<div class="clearfix trade">
			<div class="fc-price">应付金额:　<span id="priceSpan" class="price">¥5399.00</span></div>
<!--			<div class="fc-receiverInfo">寄送至:北京市海淀区三环内 中关村软件园9号楼 收货人：某某某 159****3201</div>-->
		</div>
		<div class="submit">
			<a class="sui-btn btn-danger btn-xlarge" href="javascript:insertOrder()">提交订单</a>
		</div>
	</div>
	<!-- 底部栏位 -->
	<!--页面底部-->
<div class="clearfix footer">
	<div class="py-container">
		<div class="footlink">
			<div class="Mod-service">
				<ul class="Mod-Service-list">
					<li class="grid-service-item intro  intro1">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item  intro intro2">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item intro  intro3">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item  intro intro4">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item intro intro5">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
				</ul>
			</div>
			<div class="clearfix Mod-list">
				<div class="yui3-g">
					<div class="yui3-u-1-6">
						<h4>购物指南</h4>
						<ul class="unstyled">
							<li>购物流程</li>
							<li>会员介绍</li>
							<li>生活旅行/团购</li>
							<li>常见问题</li>
							<li>购物指南</li>
						</ul>

					</div>
					<div class="yui3-u-1-6">
						<h4>配送方式</h4>
						<ul class="unstyled">
							<li>上门自提</li>
							<li>211限时达</li>
							<li>配送服务查询</li>
							<li>配送费收取标准</li>
							<li>海外配送</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>支付方式</h4>
						<ul class="unstyled">
							<li>货到付款</li>
							<li>在线支付</li>
							<li>分期付款</li>
							<li>邮局汇款</li>
							<li>公司转账</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>售后服务</h4>
						<ul class="unstyled">
							<li>售后政策</li>
							<li>价格保护</li>
							<li>退款说明</li>
							<li>返修/退换货</li>
							<li>取消订单</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>特色服务</h4>
						<ul class="unstyled">
							<li>夺宝岛</li>
							<li>DIY装机</li>
							<li>延保服务</li>
							<li>东东商城E卡</li>
							<li>东东商城通信</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>帮助中心</h4>
						<img src="img/wx_cz.jpg">
					</div>
				</div>
			</div>
			<div class="Mod-copyright">
				<ul class="helpLink">
					<li>关于我们<span class="space"></span></li>
					<li>联系我们<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>商家入驻<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们</li>
				</ul>
				<p>地址：北京市昌平区沙阳路18号 邮编：100000 电话：400-0123-302</p>
				<p>京ICP备08006666号京公网安备11010888888</p>
			</div>
		</div>
	</div>
</div>
<!--页面底部END-->

</body>

</html>
<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<!--<script type="text/javascript" src="/components/ui-modules/nav/nav-portal-top.js"></script>-->
<script type="text/javascript" src="/js/pages/getOrderInfo.js"></script>

<!--bootstrap-toastr-->
<script type="text/javascript" src="/bootstrap/toastr/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="/bootstrap/toastr/toastr.css">

<script>

	function listContactInfo() {
		$.ajax({
			url : "/address/getAddressListByUser",
			dataType : "json",
			type : "get",
			async : false,
			success : function (returnData) {
				if (returnData.code == 200) {
					var result = returnData.data;
					var html = '';
					$(result).each(function (i, e) {
						html += '<div>'
						if (i == 0) {
							html += '<div class="con name selected"><input type="hidden" value="'+ e.id +'"><a onclick="changeClass(this);" >' + e.contact + '<span title="点击取消选择">&nbsp;</a></div>'
						}else {
							html += '<div class="con name"><input type="hidden" value="'+ e.id +'"><a onclick="changeClass(this);" >' + e.contact + '<span title="点击取消选择">&nbsp;</a></div>'
						}
						html += '<div class="con address">'+ e.contact+" "+e.province+" "+e.city+" "+e.town+" "+e.address +' <span>'+ e.mobile +'</span>'
						if (e.isDefault == 0) {
							html += '<span class="base">默认地址</span>'
						}
						html += '<span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" >编辑</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></span>'
						html += '</div>'
						html += '<div class="clearfix"></div>'
						html += '</div>'
					})
					$("#contactInfo").html(html);
				}
			},
			error : function () {
				toastr.error("系统错误")
			}
		})
	}

	function changeClass(obj) {
		if ($(obj.parentNode).attr("class") == "con name selected") {
			$(obj.parentNode).attr("class","con name")

		}else if ($(obj.parentNode).attr("class") == "con name") {
			$(obj.parentNode).attr("class","con name selected")
		}
	}

	var cartList;
	$(function () {
		listContactInfo();
		$.ajax({
			url : "/cart/cartList",
			type : "post",
			dataType : "json",
			success : function (returnData) {
				if (returnData.code == 200) {
					cartList = returnData.data;
					console.log(cartList);
					var carts = "";
					var count = 0;
					var zj = 0;
					$(cartList).each(function (index, event) {
						$(event.tbOrderItemList).each(function (i, e) {
							count += e.num;
							carts += "<li>";
							carts += "<div class='sendGoods'>";
							carts += "<ul class='yui3-g'>";
							carts += "<li class='yui3-u-1-6'>";
							carts += "<span><img src='" + e.picPath + "' width='82px' height='82px'/></span>";
							carts += "</li>";
							carts += "<li class='yui3-u-7-12'>";
							carts += "<div class='desc'>" + e.title + "</div>";
							carts += "<div class='seven'>7天无理由退货</div>";
							carts += "</li>";
							carts += "<li class='yui3-u-1-12'>";
							carts += "<div class='price'>￥" + e.price + "</div>";
							zj += (e.price * e.num); // 合计价格
							carts += "</li>";
							carts += "<li class='yui3-u-1-12'>";
							carts += "<div class='num'>X" + e.num + "</div>";
							carts += "</li>";
							carts += "<li class='yui3-u-1-12'>";
							carts += "<div class='exit'>有货</div>";
							carts += "</li>";
							carts += "</ul>";
							carts += "</div>";
							carts += "</li>";
						});
					});
					$("#cartUl").html(carts);
					// 商品总个数
					$("#numIId").text(count);
					// 总价格
					$("#priceEmId").text("￥" + zj);
					$("#priceSpan").text("￥" + zj);
					// 最底部总价格
				} else {
					toastr.error("购物车清单查询失败");
				}
			},
			error : function () {
				toastr.error("系统错误");
			}
		});
	});

	function updateThisCity(o) {
		var provinceId = o.value;
		if (provinceId == 0){
			$("#city").html("<option value='0'>请选择</option>");
			$("#district").html("<option value='0'>请选择</option>");
			return;
		}
		$.ajax({
			url : "/address/listCityByProvinceId",
			type : "post",
			data : {provinceId : provinceId},
			dataType : "json",
			success : function (returnData) {
				if (returnData.code == 200) {
					var city = returnData.data;
					var cityHtml = "<option value='0'>请选择</option>";
					$(city).each(function (i, e) {
						cityHtml += "<option value='" + e.cityid + "'>" + e.city + "</option>";
					});
					$("#city").html(cityHtml);
				} else {
					toastr.error(returnData.message);
				}
			},
			error : function () {
				toastr.error("系统错误");
			}
		});
	}

	function updateArea(o) {
		var cityId = o.value;
		if (cityId == 0){
			$("#district").html("<option value='0'>请选择</option>");
			return;
		}
		$.ajax({
			url : "/address/listAreaByCityId",
			type : "post",
			data : {cityId : cityId},
			dataType : "json",
			success : function (returnData) {
				if (returnData.code == 200) {
					var area = returnData.data;
					var areaHtml = "<option value='0'>请选择</option>";
					$(area).each(function (i, e) {
						areaHtml += "<option value='" + e.areaid + "'>" + e.area + "</option>";
					});
					$("#district").html(areaHtml);
				} else {
					toastr.error(returnData.message);
				}
			},
			error : function () {
				toastr.error("系统错误");
			}
		});
	}

	function setThisAlias(o) {
		var text = $(o).html();
		$("#insertAlias").val(text);
	}

	// function deleteAddress(id) {
	// 	if (confirm("确定要删除该收货地址?")) {
	// 		$.ajax({
	// 			url : "/address/deleteAddress",
	// 			type : "post",
	// 			data : {id : id},
	// 			dataType : "json",
	// 			success : function (returnData) {
	// 				if (returnData.code == 200) {
	// 					toastr.success(returnData.message);
	// 				} else {
	// 					toastr.error(returnData.message);
	// 				}
	// 				setTimeout(function () {
	// 					reload();
	// 				}, 1000);
	// 			},
	// 			error : function () {
	// 				toastr.error("系统错误");
	// 			}
	// 		});
	// 	}
	// }

	function insertAddress() {
		$.ajax({
			url : "/address/insertAddress",
			type : "post",
			data : $("#insertAddressFrom").serialize(),
			dataType : "json",
			success : function (returnData) {
				if (returnData.code == 200) {
					toastr.success(returnData.message);
				} else {
					toastr.error(returnData.message);
				}
				setTimeout(function () {
					reload();
				}, 1000);
			},
			error : function () {
				toastr.error("系统错误");
			}
		});
	}

	function reload() {
		window.location.reload();
	}
	
	function insertOrder() {

		//收货地址id
		var addressId;
		var divs = $("#contactInfo").find("div");
		$(divs).each(function (i, e) {
			if ($(e).attr("class") == "con name selected") {
				addressId = $(e).find("input").val()
			}
		})

		//获取支付方式
		var paymentType;
		var lis = $("#payWay").find("li");
		$(lis).each(function (i, e) {
			if ($(e).attr("class") == "selected") {
				if ($(e).text() == "支付宝付款") {
					paymentType = 1;
				}else {
					paymentType = 2;
				}
			}
		});

		$.ajax({
			url : "/order/insertOrder",
			dataType : "json",
			data : {paymentType : paymentType,addressId : addressId,cartList : JSON.stringify(cartList)},
			type : "post",
			success : function (returnData) {
				if (returnData.code == 200) {
					var result = returnData.data;
					location.href = "/alipay/tradePagePay?out_trade_no="+result.out_trade_no+"&total_amount="+result.total_amount+"&subject="+result.subject+"&body="+result.body;
				}else {
					toastr.error("提交订单失败");
				}
			},
			error : function () {
				toastr.error("系统错误")
			}
		})
	}

</script>